<template>
	<view class="add-part-box" :style="'padding-top:'+(barHeight)+'px'">
		<NavBar>
			<template v-slot:center>
				<view class="nav_center">
					新增零部件
				</view>
			</template>
			<template v-slot:left>
				<text class="cancel-add" @click="cancelAdd">取消</text>
			</template>
		</NavBar>
		<view class="">
			<view class="add-form-box">
				<view class="form-item">
					<view class="title">材料分类</view>
					<view style="display: flex;align-items: center;" @click="loadModal">
						<input class="uni-input" placeholder="请选择设备类型" v-model="partTypeName" disabled />
						<uni-icons type="right" size="16" style="color: #666;"></uni-icons>
					</view>
				</view>
				<view class="form-item">
					<view class="title">名称</view>
					<input class="uni-input" placeholder="名称必填" v-model="partEntity.partName" />
				</view>
				<view class="form-item">
					<view class="title">制造编号</view>
					<input class="uni-input" placeholder="制造编号" v-model="partEntity.manufacturerStandard" />
				</view>
				<view class="form-item">
					<view class="title">材质</view>
					<input class="uni-input" placeholder="材质" v-model="partEntity.material" />
				</view>
				<view class="form-item">
					<view class="title">规格</view>
					<input class="uni-input" placeholder="规格" v-model="partEntity.specifications" />
				</view>
				<view class="form-item">
					<view class="title">图号</view>
					<input class="uni-input" placeholder="图号" v-model="partEntity.model" />
				</view>
				<view class="form-item">
					<view class="title">件号</view>
					<input class="uni-input" placeholder="件号" v-model="partEntity.partNumber" />
				</view>
				<view class="form-item">
					<view class="title">数量</view>
					<input class="uni-input" placeholder="数量" v-model="partEntity.number" />
				</view>
				<view class="form-item">
					<view class="title">单重</view>
					<input class="uni-input" placeholder="单重" v-model="partEntity.unitWeight" />
				</view>
				<view class="form-item">
					<view class="title">单位</view>
					<input class="uni-input" placeholder="单位" v-model="partEntity.unit" />
				</view>
				<view class="form-item">
					<view class="title">单价</view>
					<input class="uni-input" placeholder="单价" v-model="partEntity.price" />
				</view>
				<view class="form-item">
					<view class="title">总价</view>
					<input class="uni-input" placeholder="总价" v-model="partEntity.totalPrice" />
				</view>
				<view class="form-item">
					<view class="title">总重</view>
					<input class="uni-input" placeholder="总重" v-model="partEntity.totalWeight" />
				</view>
				<view class="form-radio-item">
					<view class="title">是否根据数量进行批量生产</view>
					<radio-group @change="batchFlagChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in batchFlagEntities"
							:key="item.id">
							<view>
								<radio :value="item.id" color="#3f8cf7" :checked="index === currentBatchFlagStatus"
									style="transform: scale(0.7)" />
							</view>
							<view>{{ item.label }}</view>
						</label>
					</radio-group>
				</view>
				<view class="form-item" style="border-bottom: none;">
					<view class="title">备注</view>
					<input class="uni-input" placeholder="备注" v-model="partEntity.remark" />
				</view>
				<button style="margin: 20rpx" type="primary" @click="savePart">
					保存
				</button>
			</view>
			<!-- 材料，部件类型类型 -->
			<view class="bottom-modal-box">
				<uni-popup ref="popup" background-color="#fff">
					<view class="popup-content">
						<view class="item" v-for="data in partTypeEntities" @click="loadModalValue(data)">
							{{data.typeName}}
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				currentBatchFlagStatus: 0,
				batchFlagEntities: [{
						id: '0',
						label: '否',
						checked: 'true',
					},
					{
						id: '1',
						label: '是'
					},
				],
				partEntity: {
					flag: 0
				},
				partTypeEntities: [],
				projectId: '',
				deviceId: '',
				partId: '',
				partTypeName: '', // 选中的材料分类名称
				barHeight: 0,
			}
		},
		onLoad(option) {
			this.projectId = option.projectId
			this.deviceId = option.deviceId
			this.partId = option.partId
			if (this.partId) {
				this.querySingle()
			}
		},
		created() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight + 45 + 10;
		},
		methods: {
			async querySingle() {
				let res = await post(api.PartSingle, {
					id: this.partId
				})
				this.partEntity = res.data
				if (this.partEntity.partTypeId) {
					post(api.PartTypeSingle, { id: this.partEntity.partTypeId }).then(res => {
						this.partTypeName = res.data == null ? null : res.data.typeName
					})
				}
				this.partEntity.flag ? this.currentBatchFlagStatus = this.partEntity.flag : this.currentBatchFlagStatus = 0
			},
			cancelAdd() {
				uni.navigateTo({
					url: '/pages/project/device/DeviceInfo?projectId=' + this.projectId + '&deviceId=' + this
						.deviceId
				})
			},
			savePart() {
				if (this.partEntity.partTypeId == null || this.partEntity.partTypeId == '' || this.partEntity.partTypeId ==
					undefined) {
					return uni.showToast({
						icon: 'none',
						title: '材料分类不能为空'
					})
				}
				if (this.partEntity.partName == null || this.partEntity.partName == '' || this.partEntity.partName ==
					undefined) {
					return uni.showToast({
						icon: 'none',
						title: '零部件名称不能为空'
					})
				}
				if (this.partEntity.number == null || this.partEntity.number == '' || this.partEntity.number ==
					undefined) {
					return uni.showToast({
						icon: 'none',
						title: '数量不能为空'
					})
				}
				if (this.partEntity.number == null || this.partEntity.number == '' || this.partEntity.number ==
					undefined) {
					return uni.showToast({
						icon: 'none',
						title: '数量不能为空'
					})
				}
				this.partEntity.projectId = this.projectId
				this.partEntity.deviceId = this.deviceId
				let url = this.partId ? api.UpdatePart : api.SavePart
				post(url, this.partEntity).then(res => {
					uni.navigateTo({
						url: '/pages/project/device/DeviceInfo?projectId=' + this.projectId +
							'&deviceId=' + this.deviceId
					})
				})
			},
			// 选择设备类型
			loadModal() {
				post(api.GetPartTypeEntities, {}).then(res => {
					this.partTypeEntities = res.data
					this.$refs.popup.open('bottom')
				})
			},
			loadModalValue(data) {
				this.partEntity.partTypeId = data.id
				this.partTypeName = data.typeName
				this.$refs.popup.close()
			},
			// 根据此变量判断是否批量生产
			batchFlagChange: function(evt) {
				for (let i = 0; i < this.batchFlagEntities.length; i++) {
					if (this.batchFlagEntities[i].id === evt.detail.value) {
						this.currentBatchFlagStatus = i
						this.partEntity.flag = i
						break
					}
				}
			},
		}
	}
</script>

<style>
	@import '../../../static/css/AddPart.css';
	@import '../../../static/css/commons.css';
</style>